<template>
	<view>
		<navbar :scrollTop="scrollY" :isLove="isLove"></navbar>
		<view class="">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:style="'height:' + height + 'px;'" @scroll="scroll">
				<!-- 轮播 -->
				<!-- <productBg :images="images" ></productBg> -->

				<!-- 轮播 -->
				<productBg :images="brandDetailData.logoImage?brandDetailData.logoImage.split(','):[]" :isUp="brandDetailData.isUp"
					@initImg="initImg" :code="brandDetailData.id" :updateTime="brandDetailData.updateTime"
					@catImg="catImg" :autoplay="true"></productBg>

				<!-- 标题 区域 -->
				<view class="product-info mb-24">
					<!-- 标题87897 -->
					<view class="acea-row row-middle row-between title-box">
						<view class="title">
							<view class="red-tag" style="position: relative;">优质品牌</view>
							<view class="title-text-i  claim-position">{{brandDetailData.realname}}</view>
							<!-- 34*3+120 根据标题字数设置距上 距左距离-->
							<!-- <view class="claim-box" style="left:222rpx">认领该品牌</view> -->
						</view>
						<view class="acea-row row-middle row-between share-btns">
							<view>
								<!-- 	<image src="../static/images/wechat_icon.png" mode=""></image>
								<view>微信</view> -->
							</view>
							<!-- <view>
								<image src="../static/images/report_icon.png" mode=""></image>
								<view>举报</view>
							</view> -->
						</view>
					</view>
					<view class="acea-row brand-types">
						<view>{{ brandDetailData.businessName || '' }}</view>
						<view>{{ brandDetailData.type || '' }}</view>
						<view>{{ brandDetailData.extension || '' }}</view>
					</view>
					<!-- 浏览、咨询统计 -->
					<!-- 		<view class="acea-row row-middle row-between visit-box border-b">
						<view class="visit-advtar">
							<image src="@/static/images/f.png" mode="" v-for="(item,index) in visitInfo" :key="index" :style="{left: (20 * index) + 'rpx'}"></image>
						</view>
						<view class="acea-row row-middle row-between visit-l">
							<view class="visit-num">18288人浏览</view>
							<view class="visit-num">5866人咨询</view>
						</view>
					</view> -->
					<!-- 消费档次 消费群体 -->
					<view class="brand-class">
						<view class="acea-row row-middle row-between pd-t-b-24 border-b">
							<view class="acea-row row-middle w-48">
								<view class="label">消费档次</view>
								<view class="text">
									{{ brandDetailData.consumeLevel == '1' ? '低档' : (brandDetailData.consumeLevel == '2' ? '中档' : (brandDetailData.consumeLevel == '3' ? '高档' : ''))}}
								</view>
							</view>
							<view class="acea-row row-middle w-48">
								<view class="label">消费群体</view>
								<view class="text">{{ brandDetailData.consumeKeyword || '' }}</view>
							</view>
						</view>
					</view>
					<!-- 门店数量 人均消费  日营业额 净利润率 -->
					<view class="acea-row row-middle row-between shop-area">
						<view class="">
							<view class="red-bold-txt">{{ brandDetailData.distributionPoint || 0 }}</view>
							<view class="gray-txt">门店数量</view>
						</view>
						<view class="">
							<view class="red-bold-txt">{{ brandDetailData.consumeMoney || 0 }}<text
									class="red-bold-txt-s">元</text></view>
							<view class="gray-txt">人均消费</view>
						</view>
						<view class="">
							<view class="red-bold-txt">{{ brandDetailData.twnover || 0 }}<text
									class="red-nomarl-txt">元</text> </view>
							<view class="gray-txt">日营业额</view>
						</view>
						<view class="">
							<view class="red-bold-txt">{{ brandDetailData.rate || 0 }}<text
									class="red-nomarl-txt">%</text></view>
							<view class="gray-txt">净利润率</view>
						</view>
					</view>
					<!-- 地址 -->
					<!-- <view class="acea-row row-top row-between address border-b">
						<view class="address-l line2">{{ brandDetailData.address }}</view>
						<view class="acea-row row-middle distance">
							<image src="../static/images/red_location.png" mode=""></image>
							<view>{{ brandDetailData.distance }}km</view>
						</view>
					</view> -->
					<!-- 品牌公司名称 -->
					<view class="acea-row row-middle compony-name">
						<image src="../static/images/company_icon.png" mode=""></image>
						<view class="text">{{ brandDetailData.companyName }}</view>
					</view>
				</view>
				<!-- 可切换区域 -->
				<view class="mb-24">
					<detail-nav :tabNavOns="5" :tabNav="detailTabnav" :brandId="brandId" :needMore="false"></detail-nav>
				</view>
				<!-- 经营特色 联系人 -->
				<view class="module-box white-bg mb-24">
					<!-- 经营特色 -->
					<view class="supplement pd-t-b-24">
						<view class="module-title">经营特色</view>
						<view class="text pd-t-b-24">
							{{ brandDetailData.content || '暂无'}}
						</view>
					</view>
					<!-- 联系人 -->
					<contacts-list v-if="brandDetailData.contacts&&brandDetailData.contacts.length>0" :list="brandDetailData.contacts"></contacts-list>
				</view>
				<!-- 推荐 -->
				<!-- 				<view class="goods">
					<view class="acea-row row-between goods-top">
						<view class="acea-row row-middle tabs">
							<view :class="['tab',goodsTabOn==index?'tab-on':'']" v-for="(item,index) in goodsTab" :key="index" @click="goodsTabOn=index">{{item}}</view>	
						</view>	
					</view>
					<recommend :notType="false"></recommend>
				</view> -->

				<view class="uni-p-b-98"></view>
			</scroll-view>
		</view>
		<detail-footer v-if="brandDetailData.contacts&&brandDetailData.contacts.length>0"></detail-footer>
		<report :link-id="brandDetailData.id" :types="11" ref="report" />
	</view>
</template>

<script>
	import navbar from '../components/navbar/navbar.vue'
	import productBg from '../components/productBg/productBg.vue'
	import detailNav from '../components/detailNav/detailNav.vue'
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import recommend from '../components/recommend/recommend.vue'
	import report from "@/pages/details/components/goods_report/report.vue"
	import {
		getBrandDetailsApi
	} from '@/api/brand/index.js'
	import {
		getLocation
	} from '@/filters/commFilter.js'
	export default {
		components: {
			navbar,
			productBg,
			detailNav,
			detailFooter,
			contactsList,
			recommend,
			report
		},
		data() {
			return {
				scrollY: 0,
				message: [],
				scrollTop: 0,
				isLove: false,
				height: 0,
				opacity: 0,
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 8],
				goodsTabOn: 0,
				goodsTab: ['为你推荐', '附近推荐'],
				goodsList: [1, 2],
				detailTabnav: [],
				brandDetailData: {},
				images: [],
				videos: [],
				bhv: [],
				brandId: null,
			};
		},
		onLoad(options) {
			let that = this;
			if (!options.id) return uni.navigateBack()
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
				}
			});
			this.brandId = options.id;
			this.getData(options.id);
		},
		methods: {
			//获取详情数据
			async getData(id) {
				try {
					const {
						latitude,
						longitude
					} = await getLocation();
					let {
						data
					} = await getBrandDetailsApi(id, {
						latitude,
						longitude
					});
					this.brandDetailData = data;
					// this.brandDetailData.distance = Number(this.brandDetailData.distance).toFixed(2);
					this.images.push(data.image)
					switch (data.extension) {
						case '0':
							this.brandDetailData.extension = '全国性扩张';
							break;
						case '1':
							this.brandDetailData.extension = '区域性扩张';
							break;
						case '2':
							this.brandDetailData.extension = '本士性扩张';
							break;
						case '3':
							this.brandDetailData.extension = '无扩张计划';
							break;

					}
					switch (data.type) {
						case '0':
							this.brandDetailData.type = '国际知名品牌';
							break;
						case '1':
							this.brandDetailData.type = '国内知名品牌';
							break;
						case '2':
							this.brandDetailData.type = '本工知名品牌';
							break;
						case '3':
							this.brandDetailData.type = '成长性国内品牌';
							break;

					}
					this.detailTabnav = [
					// 	{
					// 	name: '供应链',
					// 	type: '1',
					// 	num: this.brandDetailData.supplyChain || 0
					// }, {
					// 	name: '选址',
					// 	type: '2',
					// 	num: this.brandDetailData.expansionPlan || 0
					// }, {
					// 	name: '加盟',
					// 	type: '3',
					// 	num: this.brandDetailData.agentJoin || 0
					// }, {
					// 	name: '布点',
					// 	type: '4',
					// 	num: this.brandDetailData.distributionPoint || 0
					// },
					{
						name: '品牌故事',
						type: '5',
						num: this.brandDetailData.brandStory || 0
					}]
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			initImg(imgArr, videArr) {
				// this.shareInfo.img = imgArr[0]
			},
			catImg() {
				if (this.bhv.length < 1 || this.bhv.indexOf(4) == -1) {
					this.bhv.push(4)
				}
			},
			toReport() {
				this.$refs.report.open();
			},
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
			},

		}
	}
</script>

<style lang="scss">
	@import "../static/css/index.scss";
</style>